<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { computed } from 'vue';
import CardData from './modules/card-data.vue';
import HeaderBanner from './modules/header-banner.vue';
import LineChart from './modules/line-chart.vue';
import PieChart from './modules/pie-chart.vue';
import QueryTable from './modules/query-table.vue';

const appStore = useAppStore();

const gap = computed(() => (appStore.isMobile ? 0 : 16));
</script>

<template>
    <NSpace vertical :size="16">
        <NAlert :title="$t('common.warning')" type="warning">
            {{ $t('page.home.branchDesc') }}
        </NAlert>
        <HeaderBanner />
        <CardData />
        <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
            <NGi span="24 s:24 m:14">
                <NCard :bordered="false" class="card-wrapper">
                    <LineChart />
                </NCard>
            </NGi>
            <NGi span="24 s:24 m:10">
                <NCard :bordered="false" class="card-wrapper">
                    <PieChart />
                </NCard>
            </NGi>
        </NGrid>
        <NGrid>
            <NGi span="24 s:24 m:14">
                <QueryTable />
            </NGi>
        </NGrid>
    </NSpace>
</template>

<style scoped></style>
